/**
 * Created with  SublimeText
 * @Author:      Bert
 * @DateTime:    2016-12-21 10:19:40
 * @Description: 
 */

define(function(require, exports, module) {

    var tpl = require('{base}/tpls/myProfileAboutMe.tpl');

    var component = {

        template: _.template(tpl),

        render: function(page, obj) {
            this.page = page;
            return this.template(this.getTplData());
        },

        componentMount: function() {
            this.bindEvt();
            this.myProfileAboutMeRender();
        },

        componentUpdate: function() {

        },

        bindEvt: function() {
            var tthis = this,
                Dom = $('#' + this.page.id).find('.tabBox').find('div[tabName="myProfileAboutMe"]');

            Dom.on('click', '.infoKey .edit', function() {
                var keyName = $(this).parents('.infoKey').attr('keyname');
                tthis.switchKeyEdit(keyName);
            });

            Dom.on('click', '.infoKey .btnSave', function() {
                if ($(this).hasClass('btnDisabled')) {
                    return false;
                }
                var keyName = $(this).parents('.infoKey').attr('keyname');
                tthis.ajaxPostUserInfo(keyName);
            });

            Dom.on('click', '.infoKey .btnCancel', function() {
                var keyName = $(this).parents('.infoKey').attr('keyname');
                tthis.switchKeyRead(keyName);
            });

        },

        getTplData: function() {
            var obj = {
                userInfo: JSON.parse(Util.getSessionStorage('userInfo')),
                userStatus: JSON.parse(Util.getSessionStorage('userStatus'))
            }
            return obj;
        },

        ajaxPostUserInfo: function(keyName) {
            var tthis = this,
                postUserInfo = tthis[keyName + 'GetVal']();
            var callback = function(data) {
                if (data.results) {
                    tthis[keyName + 'SetVal'](data.data);
                    this.switchKeyRead(keyName);
                    this.affectOtherChange(keyName);
                }
            };
            Share.updateProfile(postUserInfo, callback.bind(this));
        },

        myProfileAboutMeRender: function() {
            var tthis = this,
                Dom = $('#' + this.page.id).find('.tabBox').find('div[tabName="myProfileAboutMe"]');
            Dom.find('.infoKey').each(function() {
                var keyName = $(this).attr('keyName');
                tthis.switchKeyRead(keyName);
            })
        },

        switchKeyRead: function(name) {
            var html = this.createDom(name, 'Read'),
                Dom = $('#' + this.page.id).find('.tabBox').find('div[tabName="myProfileAboutMe"]'),
                readDom = Dom.find('*[keyName=\'' + name + '\']').find('.profileRead'),
                editDom = Dom.find('*[keyName=\'' + name + '\']').find('.profileEdit');
            readDom.html(html);
            readDom.show();
            editDom.hide();
        },

        switchKeyEdit: function(name) {
            var html = this.createDom(name, 'Edit'),
                Dom = $('#' + this.page.id).find('.tabBox').find('div[tabName="myProfileAboutMe"]'),
                readDom = Dom.find('*[keyName=\'' + name + '\']').find('.profileRead'),
                editDom = Dom.find('*[keyName=\'' + name + '\']').find('.profileEdit');
            editDom.html(html);
            editDom.show();
            readDom.hide();
        },

        createDom: function(name, type) {
            if (this[name + type]) {
                return this[name + type]();
            } else {
                console.log(name + type + ' function not fonund!');
            }
        },

        affectOtherChange: function(typeString) {
            if (this.page.myProfileAboutMeComponentChange) {
                this.page.myProfileAboutMeComponentChange(typeString);
            }
        },

        myFirstDateIdeaRead: function() {
            var userData = this.getTplData();
            if (typeof(userData) != 'undefined' && userData != null) {
                var firstIdeaCategory = userData.userInfo.about.firstidea_category,
                    firstIdeaPlace = userData.userInfo.about.firstidea_place ? userData.userInfo.about.firstidea_place : Lang.askMe,
                    firstIdea = userData.userInfo.about.firstidea,
                    html = '<h3 class="infoTitleStyOne">My first date idea <span class="edit"></span></h3>' +
                    '<div class="infoContent">' +
                    '<div class="lineMargin">' +
                    '<span class="separatedStyOne">Category: ' + Share.getSelectGroupLabel('ms_perfect_date_category', firstIdeaCategory, Lang.askMe) + '</span>' +
                    '<span class="separatedStyOne">Location: ' + firstIdeaPlace + '</span>' +
                    '</div>' +
                    '<div>' + Util.HTMLAllbrCode(firstIdea) + '</div>' +
                    '</div>';
                return html;
            }
        },

        myFirstDateIdeaEdit: function() {
            var userData = this.getTplData();
            if (typeof(userData) != 'undefined' && userData != null) {
                var firstIdeaCategory = userData.userInfo.about.firstidea_category,
                    firstIdeaPlace = userData.userInfo.about.firstidea_place ? userData.userInfo.about.firstidea_place : Lang.askMe,
                    firstIdea = userData.userInfo.about.firstidea,
                    html = '<h3> My first date idea: </h3>' +
                    '<div>' +
                    '<span class="separatedStyOne">Category: <select name="firstIdeaCategory">' + Share.getSelectGroupHtml('ms_perfect_date_category', firstIdeaCategory, 'Select a category ...') + '</select></span>' +
                    '<span class="separatedStyOne firstIdeaPlace">Location: <input name="firstIdeaPlace" type="text" value="' + firstIdeaPlace + '"/></span>' +
                    '</div>' +
                    '<textarea placeholder="Describe your first date ideas here. For example: How about we have a candlelight dinner and then take a nice walk on the beach." maxlength="2000">' + firstIdea + '</textarea>' +
                    '<div class = "submitBox"><div class="btnCancel cancel">cancel</div> <div class = "btn btnSave save"> save </div></div>';
                return html;
            }
        },

        myFirstDateIdeaGetVal: function() {
            var userInfo = {
                'perfect_date_category': $('#' + this.page.id).find('*[keyName=\'myFirstDateIdea\']').find('.profileEdit').find('select').val(),
                'perfect_date_place': $('#' + this.page.id).find('*[keyName=\'myFirstDateIdea\']').find('.profileEdit').find('input').val(),
                'perfect_date': $('#' + this.page.id).find('*[keyName=\'myFirstDateIdea\']').find('.profileEdit').find('textarea').val()
            };
            return userInfo;
        },

        myFirstDateIdeaSetVal: function(data) {
            var userInfo = JSON.parse(Util.getSessionStorage('userInfo'));
            userInfo.about.firstidea_category = data.perfect_date_category;
            userInfo.about.firstidea_place = data.perfect_date_place;
            userInfo.about.firstidea = data.perfect_date;
            Util.setSessionStorage('userInfo', JSON.stringify(userInfo));
        },

        myRelationShipHistoryRead: function() {
            var userData = this.getTplData();
            if (typeof(userData) != 'undefined' && userData != null) {
                var datingHistoryNumber = userData.userInfo.about.dating_history_number,
                    datingHistoryRecord = userData.userInfo.about.dating_history_record,
                    html = '<h3 class="infoTitleStyOne"> My relationship history: <span class="titleMin">(number of past relationships)</span> <span class="edit"></span></h3>' +
                    '<div class="infoContent">' +
                    '<div class="lineMargin">' +
                    '<span class="separatedStyOne">number: ' + Share.getSelectLabel('ms_dating_history_number', datingHistoryNumber, Lang.askMe) + '</span>' +
                    '</div>' +
                    '<div>' + Util.HTMLAllbrCode(datingHistoryRecord) + '</div>' +
                    '</div>';
                return html;
            }
        },

        myRelationShipHistoryEdit: function() {
            var userData = this.getTplData();
            if (typeof(userData) != 'undefined' && userData != null) {
                var datingHistoryNumber = userData.userInfo.about.dating_history_number,
                    datingHistoryRecord = userData.userInfo.about.dating_history_record,
                    html = '<h3> My relationship history: <span class="titleMin">(number of past relationships)</span> </h3>' +
                    '<div>' +
                    '<span class="separatedStyOne"> number: <select name="firstIdeaCategory">' + Share.getSelectHtml('ms_dating_history_number', datingHistoryNumber, Lang.askMe) + '</select> </span>' +
                    '</div>' +
                    '<textarea placeholder="Share your past dating relationship stories (ie, how long did it last, reason for split etc.)"  maxlength="2000">' + datingHistoryRecord + '</textarea>' +
                    '<div class = "submitBox"><div class="btnCancel cancel">cancel</div> <div class = "btn btnSave save"> save </div></div>';
                return html;
            }
        },

        myRelationShipHistoryGetVal: function() {
            var userInfo = {
                'dating_history_number': $('#' + this.page.id).find('*[keyName=\'myRelationShipHistory\']').find('.profileEdit').find('select').val(),
                'dating_history_record': $('#' + this.page.id).find('*[keyName=\'myRelationShipHistory\']').find('.profileEdit').find('textarea').val()
            };
            return userInfo;
        },

        myRelationShipHistorySetVal: function(data) {
            var userInfo = JSON.parse(Util.getSessionStorage('userInfo'));
            userInfo.about.dating_history_number = data.dating_history_number;
            userInfo.about.dating_history_record = data.dating_history_record;
            Util.setSessionStorage('userInfo', JSON.stringify(userInfo));
        },

        myWeShouldGoOnADateIfRead: function() {
            var userData = this.getTplData();
            if (typeof(userData) != 'undefined' && userData != null) {
                var inviteMsgMe = userData.userInfo.about.invite_msg_me,
                    html = '<h3 class="infoTitleStyOne"> We should go on a date if <span class="edit"></span></h3>' +
                    '<div class="infoContent">' +
                    '<div>' + Util.HTMLAllbrCode(inviteMsgMe) + '</div>' +
                    '</div>';
                return html;
            }
        },

        myWeShouldGoOnADateIfEdit: function() {
            var userData = this.getTplData();
            if (typeof(userData) != 'undefined' && userData != null) {
                var inviteMsgMe = userData.userInfo.about.invite_msg_me,
                    html = '<h3> We should go on a date if: </span> </h3>' +
                    '<textarea maxlength="2000">' + inviteMsgMe + '</textarea>' +
                    '<div class = "submitBox"><div class="btnCancel cancel">cancel</div> <div class = "btn btnSave save"> save </div></div>';
                return html;
            }
        },

        myWeShouldGoOnADateIfGetVal: function() {
            var userInfo = {
                'invite_msg_me': $('#' + this.page.id).find('*[keyName=\'myWeShouldGoOnADateIf\']').find('.profileEdit').find('textarea').val()
            };
            return userInfo;
        },

        myWeShouldGoOnADateIfSetVal: function(data) {
            var userInfo = JSON.parse(Util.getSessionStorage('userInfo'));
            userInfo.about.invite_msg_me = data.invite_msg_me;
            Util.setSessionStorage('userInfo', JSON.stringify(userInfo));
        },

    }

    module.exports = component;
});
